<template>
  <el-dialog :custom-class="`pay-dialog ${customClass}`"
    :visible.sync="showPayDialog"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    :show-close="false"
    :append-to-body="false"
    :top="top?top:'25vh'"
    width="360px"
    @close="onDialogClose">
    <template #title>
      <svg-icon class="close"
        iconClass="close"
        @click.native="showPayDialog = false" />
    </template>
    <div class="pay-box">
      <PayCode :orderInfo="orderInfo"
        v-if="showPayDialog"
        :payWay="payWay"
        @onStatusChange="onStatusChange" />
      <div class="spilt-line"></div>
      <div class="pay-right">
        <svg-icon class="wechat" iconClass="wechat" v-if="payWay === 2"/>
        <svg-icon class="alipay" iconClass="alipay" v-else/>
        <h5>打开{{payWay==2?'微信':'支付宝'}}扫码支付</h5>
        <span class="price"><span class="mark">￥</span>{{ parseFloat(price/100) }} </span>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import PayCode from '@/components/qr-code'
export default {
  name: 'PayCodeDialog',
  components: {
    PayCode
  },
  props: {
    price: [Number, String],
    payWay: Number,
    visible: Boolean,
    orderInfo: Object,
    customClass: {
      type: String,
      default: ''
    },
    top: String
  },
  computed: {
    showPayDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    onStatusChange (status) {
      if (status === 'succes') { // 支付成功
        this.showPayDialog = false
        this.$emit('onPaySucces')
      }
    },
    onDialogClose () {
      this.$emit('close')
    }
  }
}
</script>
<style lang="scss" scoped>
.pay-dialog {
  .pay-box {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .spilt-line {
    width: 1px;
    height: 132px;
    background: url('../../../assets/line.png');
  }
  .pay-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #333;
    .wechat{
      font-size: 40px;
      color: #44b820;
    }
    .alipay{
      font-size: 40px;
      color: #4c9aff;
    }
    h5 {
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .price {
      font-size: 28px;
      color: #fc5b42;
      font-weight: bold;
      .mark {
        font-weight: 400;
        font-size: 16px;
      }
    }
  }
}
</style>
<style lang="scss">
.pay-dialog {
  background-color: #fff;
  border: none;
  user-select: none;
  border: 1px solid #dbdbdb;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
  border-radius: 6px;
  font-family: "Microsoft YaHei";
  color: #333;
  font-size: 14px;
  .el-dialog__header {
    padding: 10px 10px 0 0;
    height: 24px;
    text-align: center;
  }
  .el-dialog__body {
    padding: 10px 27px 36px 38px;
  }
  .close {
    position: absolute;
    cursor: pointer;
    right: 6px;
    top: 6px;
    margin: 0;
    width: 24px;
    height: 24px;
  }
}
</style>
